import { defineStore } from 'pinia'
import { ref, watch } from 'vue'

export const useSettingsStore = defineStore('settings', () => {
  // 语言设置
  const language = ref(localStorage.getItem('language') || 'zh')
  const languageMap = {
    zh: {
      name: '中文',
      messages: {
        home: '首页',
        books: '图书管理',
        borrow: '借阅管理',
        return: '归还管理',
        defaultTheme: '默认主题',
        darkTheme: '暗黑主题',
        blueTheme: '蓝色主题',
        greenTheme: '绿色主题'
      }
    },
    en: {
      name: 'English',
      messages: {
        home: 'Home',
        books: 'Books Management',
        borrow: 'Borrow Management',
        return: 'Return Management',
        defaultTheme: 'Default Theme',
        darkTheme: 'Dark Theme',
        blueTheme: 'Blue Theme',
        greenTheme: 'Green Theme'
      }
    }
  }

  // 主题设置
  const theme = ref(localStorage.getItem('theme') || 'default')
  const themes = {
    default: {
      name: 'defaultTheme',
      primaryColor: '#409EFF',
      backgroundColor: '#f5f7fa',
      textColor: '#303133'
    },
    dark: {
      name: 'darkTheme',
      primaryColor: '#409EFF',
      backgroundColor: '#1f1f1f',
      textColor: '#ffffff'
    },
    blue: {
      name: 'blueTheme',
      primaryColor: '#409EFF',
      backgroundColor: '#ecf5ff',
      textColor: '#303133'
    },
    green: {
      name: 'greenTheme',
      primaryColor: '#67C23A',
      backgroundColor: '#f0f9eb',
      textColor: '#303133'
    }
  }

  // 监听语言变化
  watch(language, (newLang) => {
    localStorage.setItem('language', newLang)
    document.documentElement.lang = newLang
  })

  // 监听主题变化
  watch(theme, (newTheme) => {
    localStorage.setItem('theme', newTheme)
    applyTheme(newTheme)
  })

  // 应用主题
  const applyTheme = (themeName) => {
    const themeConfig = themes[themeName]
    const root = document.documentElement
    
    root.style.setProperty('--el-color-primary', themeConfig.primaryColor)
    root.style.setProperty('--el-bg-color', themeConfig.backgroundColor)
    root.style.setProperty('--el-text-color-primary', themeConfig.textColor)
  }

  // 初始化主题
  const initTheme = () => {
    applyTheme(theme.value)
  }

  return {
    language,
    languageMap,
    theme,
    themes,
    initTheme
  }
}) 